<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>

</head>
</head>
<body>
<div id="app">
  控件的绑定
  <p><input id="xyj" type="checkbox" v-model="checkbook" value="西游记"/>
    <label for="xyj">西游记</label>
    <input id="shz" type="checkbox" v-model="checkbook" value="水浒传"/>
    <label for="shz">水浒传</label>
    <input id="sgyy" type="checkbox" v-model="checkbook" value="三国演义"/>
    <label for="sgyy">三国演义</label>
    <input id="hlm" type="checkbox" v-model="checkbook" value="红楼梦"/>
    <label for="xyj">红楼梦</label>
  </p>
  <p>性别:<input id="male" type="radio" v-model="sex" value="男" name="sex"/>
    <label for="male">男</label>
    <input id="female" type="radio" v-model="sex" value="女" name="sex"/>
    <label for="female">女</label>
  </p>
  <p>爱好:<input id="read" type="radio" v-model="interest" value="阅读" name="interest"/>
    <label for="male">阅读</label>
    <input id="movie" type="radio" v-model="interest" value="看电影" name="interest"/>
    <label for="female">看电影</label>
  </p>
  <p>
    所在城市:<select v-model="city">
    <option value="徐州">徐州</option>
    <option value="泰州">泰州</option>
    <option value="扬州">扬州</option>
    <option value="苏州">苏州</option>
  </select>
  </p>
  <p>
    喜欢的水果:<select v-model="fruit" multiple>
    <option value="苹果" selected>苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="橘子">橘子</option>
    <option value="柚子">柚子</option>
  </select>
  </p>
  <div style="border: #abc123 1px solid;width:500px;">
    <p>我最喜欢的书籍:{{checkbook}}</p>
    <p>性别:{{sex}}</p>
    <p>爱好:{{interest}}</p>
    <p>城市:{{city}}</p>
    <p>爱好:{{fruit}}</p>
  </div>


</div>
<!-- 1:引包 -->
<script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: "#app",
    data: {
      checkbook: [],
      sex: "",
      interest: "",
      fruit:[],
      city:""
    },
    methods: {}

  })
</script>
</body>
</html>
